<script setup>

import { onMounted, ref } from 'vue';
import AddOrUPdate from './addOrUpdate.vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import { deleteLogisticsCompanyApi, getLogisticsCompanyPageApi } from '@/api/logisticsCompany';

const addOrUpdateRef = ref(null)
const page = ref(1)
const pageSize = ref(10)
const totalSize = ref(0)
const companyList = ref([])
const searchForm = ref({
  companyName: '',
})



const handleDelete = (row) => {
  ElMessageBox.alert('确定要删除吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
    }).then(async () => {
        const res = await deleteLogisticsCompanyApi(row.id)
        if(res.code == 1){
            ElMessage.success('删除成功')
            getCompanyPage()
        }else{
            ElMessage.error('删除失败')
        }
    }).catch(() => {
})
}
const handleEdit = (row) => {
  addOrUpdateRef.value.dialogFormVisible = true
  addOrUpdateRef.value.title = '编辑物流公司'
  addOrUpdateRef.value.reset()
  addOrUpdateRef.value.companyForm = JSON.parse(JSON.stringify(row))
}
const add = () =>{
  addOrUpdateRef.value.dialogFormVisible = true
  addOrUpdateRef.value.title = '新增物流公司'
  addOrUpdateRef.value.reset()
}
const reset = () =>{
    searchForm.value.companyName = ''
    getCompanyPage()
}
const handleSizeChange = (val) => {
  pageSize.value = val
  page.value = 1
  getCompanyPage()
}
const handleCurrentChange = (val) => {
  page.value = val
  getCompanyPage()
}
const getCompanyPage = async () => {
  const res = await getLogisticsCompanyPageApi(page.value, pageSize.value, searchForm.value.companyName)
  companyList.value = res.data.rows
  totalSize.value = res.data.total
}

onMounted(() => {
  getCompanyPage()
})

</script>

<template>

    <div style="display: flex; justify-content: space-between; align-items: center;">
      <el-button type="primary" @click="add">添加</el-button>
      <el-form :inline="true" :model="searchForm">
        <el-form-item label="公司名称">
          <el-input v-model="searchForm.companyName" placeholder="请输入" clearable />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="getCompanyPage">查询</el-button>
          <el-button @click="reset">重置</el-button>
        </el-form-item>
      </el-form>
    </div>

    <el-table :data="companyList" style="width: 100%">
    <el-table-column type="index" label="序号" />
    <el-table-column prop="companyName" label="物流公司名字" />
    <el-table-column prop="minPrice" label="最低费用" />
    <el-table-column prop="linkUser" label="联系人" />
    <el-table-column prop="linkPhone" label="联系电话" />

    <el-table-column width="200px" label="操作">
      <template #default="scope">
        <el-button type="primary" size="mini" @click="handleEdit(scope.row)">编辑</el-button>
        <el-button type="danger" size="mini" @click="handleDelete(scope.row)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>

  <el-pagination
      v-model:current-page="currentPage"
      v-model:page-size="pageSize"
      :page-sizes="[10, 20, 30, 40]"
      :small="small"
      :disabled="disabled"
      :background="background"
      layout="total, sizes, prev, pager, next, jumper"
      :total="totalSize"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />

  <AddOrUPdate ref="addOrUpdateRef" @refresh="getCompanyPage" />

</template>